<template>
  <div class="container" v-loading="loading">
    <el-divider content-position="left"><span class="title-left-color">订单信息</span></el-divider>
    <div style="margin: 0 70px">
      <el-descriptions :column="4" size="default">
        <el-descriptions-item label="手机使用情况:">{{ form.mobile_situation_label }}</el-descriptions-item>
        <el-descriptions-item label="套餐:">{{ form.card_contract_package_name }}</el-descriptions-item>
        <el-descriptions-item label="订单总金额:">{{ form.total_price }}元</el-descriptions-item>
        <el-descriptions-item label="创建时间:">{{ handleVerifyFormatDate(form.create_time) }}</el-descriptions-item>
        <el-descriptions-item label="完结时间:">{{ handleVerifyFormatDate(form.complete_time) }}</el-descriptions-item>
        <el-descriptions-item label="取消时间:">{{ handleVerifyFormatDate(form.cancel_time) }}</el-descriptions-item>
        <el-descriptions-item label="绑定店铺:">{{ form.store!.store_name }}</el-descriptions-item>
      </el-descriptions>
    </div>
    <el-divider content-position="left"><span class="title-left-color">收货信息</span></el-divider>
    <div style="margin: 0 70px">
      <el-descriptions :column="4" size="default">
        <el-descriptions-item label="真实姓名:">{{ form.name }}</el-descriptions-item>
        <el-descriptions-item label="真实电话:">{{ form.mobile }}</el-descriptions-item>
        <el-descriptions-item label="办卡号码:">{{ form.card_mobile }}</el-descriptions-item>
      </el-descriptions>
      <el-descriptions :column="4" size="default">
        <el-descriptions-item label="身份证号:">{{ form.id_number }}</el-descriptions-item>
        <el-descriptions-item label="收货地址:">{{ form.address }}</el-descriptions-item>
      </el-descriptions>
    </div>
    <el-divider content-position="left"><span class="title-left-color">账单信息</span></el-divider>
    <div style="margin: 0 70px">
      <el-table :data="form.bills" border class="table" :reserve-selection="true">
        <el-table-column type="index" align="center"> </el-table-column>
        <el-table-column prop="out_bill_no" label="商家订单号" align="center"> </el-table-column>
        <el-table-column prop="title" label="标题" align="center"> </el-table-column>
        <el-table-column prop="price" label="每期金额(元)" align="center"> </el-table-column>
        <el-table-column prop="staging_time" label="预计扣款日" align="center" :formatter="(row: INumberCardOrderInfoBill) => handleVerifyFormatYMDDate(row.staging_time)"> </el-table-column>
        <el-table-column prop="pay_name" label="支付状态" align="center"> </el-table-column>
        <el-table-column prop="pay_source_name" label="支付来源" align="center"> </el-table-column>
        <el-table-column prop="pay_time" label="支付时间" align="center" :formatter="(row: INumberCardOrderInfoBill) => handleVerifyFormatDate(row.pay_time)"> </el-table-column>
      </el-table>
    </div>
    <div class="footer-center">
      <el-button :disabled="disabledbtn" @click="cancelSubmit">返 回</el-button>
    </div>
  </div>
</template>

<script setup lang="ts">
import type { postOrPutType } from "@/constants";
import type { HasId, ViewMode } from "@/types/common";
import { handleVerifyFormatDate, handleVerifyFormatYMDDate } from "@/utils/utils";
import { useState } from "@/hooks/useState.ts";
import type { INumberCardOrderInfoBill, INumberCardOrderInfoVO } from "@/types/rentMachineManage/numberCardOrderInfo";
import { getCardContractPackageOrderByIdInfo } from "@/utils/api/cardContractPackageOrder";
const { disabledbtn, loading, toggleState } = useState();
interface Props {
  id: number;
}
const { id } = defineProps<Props>();

const formStatus = defineModel<ViewMode>("formStatus", { required: true });
const emit = defineEmits<{
  handleInitData: [];
  handleToPrint: [id: number];
}>();

const isDisabledbtn = ref(false);
const methodType = ref<postOrPutType>("PUT");
const form = reactive<INumberCardOrderInfoVO>({
  id: 0,
  user_id: 0,
  order_sn: "",
  card_contract_package_id: 0,
  order_id: 0,
  status: "",
  total_price: 0,
  mobile_situation_value: "",
  mobile_situation_label: "",
  service_life_value: "",
  service_life_label: "",
  name: "",
  mobile: "",
  id_number: "",
  address: "",
  create_time: 0,
  cancel_time: 0,
  complete_time: 0,
  aixzu_order_sn: "",
  is_sign_contract: 0,
  pre_auth_state: 0,
  store_id: 0,
  card_mobile: "",
  is_sign_withhold: 0,
  status_name: "",
  bills: [],
  store: {
    store_id: 0,
    store_name: ""
  },
  card_contract_package_name: ""
});

onMounted(() => {
  console.log("Component mounted!");
});

/* formStatus处理器 */
const statusHandlers: Record<ViewMode, () => void> = {
  view: () => {
    isDisabledbtn.value = true;
  },
  edit: () => {
    methodType.value = "PUT";
  },
  add: () => {
    methodType.value = "POST";
  },
  none: () => {
    /* 初始化数据 */
    handleInitData();
  }
};
/* 监听formStatus,新增，编辑，查看的时候都可以打开模态框，又是有不同的操作和效果，需要单独判断，none为模态框关闭的情况，需要初始化数据 */
watch(formStatus, newValue => {
  const handler = statusHandlers[newValue];
  handler?.();
});
/*  */
watch(
  () => id,
  newValue => {
    if (newValue == 0) {
      /* 初始化数据 */
    } else {
      form.id = newValue;
      handleGetMallOrderByIdInfo(id);
    }
  }
);

/* 初始化数据 */
function handleInitData() {
  methodType.value = "POST";
  isDisabledbtn.value = false;
  form.id = 0;

  form.order_sn = "";

  form.create_time = 0;
  form.complete_time = 0;
  form.cancel_time = 0;
  form.id_number = "";
  form.mobile_situation_label = "";
  form.card_contract_package_name = "";
  form.name = "";
  form.mobile = "";
  form.card_mobile = "";
  form.address = "";
  form.card_contract_package_name = "";
  form.service_life_label = "";
  form.status_name = "";
  form.total_price = 0;

  form.store!.store_id = 0;
  form.store!.store_name = "";

  form.bills = [];
}
/* 获取订单详情数据 */
function handleGetMallOrderByIdInfo(id: number) {
  toggleState(true);
  getCardContractPackageOrderByIdInfo<INumberCardOrderInfoVO, HasId>({ id })
    .then(res => {
      form.id = res.result.id;
      form.order_sn = res.result.order_sn;

      form.create_time = res.result.create_time;
      form.complete_time = res.result.complete_time;
      form.cancel_time = res.result.cancel_time;
      form.id_number = res.result.id_number;
      form.mobile_situation_label = res.result.mobile_situation_label;
      form.card_contract_package_name = res.result.card_contract_package_name;
      form.name = res.result.name;
      form.mobile = res.result.mobile;
      form.card_mobile = res.result.card_mobile;
      form.address = res.result.address;
      form.card_contract_package_name = res.result.card_contract_package_name;
      form.service_life_label = res.result.service_life_label;
      form.status_name = res.result.status_name;
      form.total_price = res.result.total_price;

      if (res.result.store) {
        form.store!.store_name = res.result.store.store_name;
        form.store!.store_name = res.result.store.store_name;
      }
      handleInitBillingList(res.result.bills);
    })
    .catch(() => {})
    .finally(() => {
      toggleState(false);
    });
}
function /* 初始化账单信息 */
handleInitBillingList(bills: INumberCardOrderInfoBill[]) {
  for (let i = 0; i < bills.length; i++) {
    form.bills.push({
      ...bills[i],
      pay_name: bills[i].is_pay == 1 ? "已支付" : "未支付"
    });
  }
}
/* 保存或编辑 取消提交 */
function cancelSubmit() {
  // clearData();
  // activeName = "one";
  emit("handleInitData");
}
</script>

<style lang="scss" scoped>
/* 修改select的盒模型 */
.el-select {
  display: block;
}
/* 底部按钮居中 */
.footer-center {
  margin: 10px 0;
  text-align: center;
}

.img-item {
  width: 100px;
  height: 100px;
  margin-right: 10px;
}
</style>
